<template>
  <div class="app">
    <h2>1. 定义ref-reactive数据</h2>
    <define-data></define-data>

    <h2>2. 定义函数</h2>
    <define-function></define-function>

    <h2>3. 定义ToRefs失去响应式</h2>
    <define-toRefs></define-toRefs>
    
    <h2>4. 定义计算属性</h2>
    <define-computed></define-computed>

    <h2>5. Ref获取DOM</h2>
    <define-ref></define-ref>
    
    <!-- template中ref对象自动解包 -->
    <h2>hooks计数案例-当前计数: {{ counter }}</h2>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>

<script>
  import defineData from './components/01_defineData.vue'
  import defineFunction from './components/02_defineFunction.vue'
  import defineToRefs from './components/03_defineToRefs.vue'
  import defineComputed from './components/04_defineComputed.vue'
  import defineRef from './components/05_defineRef.vue'

  import useCounter from './hooks/useCounter'

  export default {
    components: {
      defineData,
      defineFunction,
      defineToRefs,
      defineComputed,
      defineRef
    },
    setup() {
      return {
        ...useCounter()  // 自定义hook函数
      }
    }
  }
</script>

<style>
</style>
